import React, { useState } from 'react';
import GridLayout from './components/GridLayout';
import { GridItem } from './components/types';
import "./index.less";

const DragDemo: React.FC = () => {
    const initialItems: GridItem[] = [
        { id: '1', content: '项目 A', color: '#FF6B6B' },
        { id: '2', content: '项目 B', color: '#4ECDC4' },
        { id: '3', content: '项目 C', color: '#FFD166' },
        { id: '4', content: '项目 D', color: '#06D6A0' },
        { id: '5', content: '项目 E', color: '#118AB2' },
        { id: '6', content: '项目 F', color: '#073B4C' },
        { id: '7', content: '项目 G', color: '#EF476F' },
        { id: '8', content: '项目 H', color: '#FFD166' },
        { id: '9', content: '项目 I', color: '#06D6A0' },
        { id: '10', content: '项目 J', color: '#118AB2' },
        { id: '11', content: '项目 K', color: '#073B4C' },
        { id: '12', content: '项目 L', color: '#EF476F' },
    ];

    const [items, setItems] = useState<GridItem[]>(initialItems);
    const [dragInfo, setDragInfo] = useState<string>('');

    const moveItem = (fromIndex: number, toIndex: number) => {
        const newItems = [...items];
        const [movedItem] = newItems.splice(fromIndex, 1);
        newItems.splice(toIndex, 0, movedItem);
        setItems(newItems);

        setDragInfo(`移动了项目 ${items[fromIndex].id} 到位置 ${toIndex + 1}`);
        setTimeout(() => setDragInfo(''), 2000);
    };

    const resetLayout = () => {
        setItems(initialItems);
        setDragInfo('布局已重置');
        setTimeout(() => setDragInfo(''), 2000);
    };

    return (
        <div className="drag-demo">
            <header>
                <h1>栅格布局拖拽排序</h1>
                <p>使用React、react-dnd和TypeScript实现的拖拽排序功能</p>
            </header>

            <div className="controls">
                <button onClick={resetLayout}>重置布局</button>
                <div className="drag-info">{dragInfo}</div>
            </div>

            <GridLayout items={items} moveItem={moveItem} />

            <div className="instructions">
                <h3>使用说明：</h3>
                <ul>
                    <li>拖拽任意项目到新位置</li>
                    <li>项目将自动重新排列</li>
                    <li>点击"重置布局"恢复初始状态</li>
                </ul>
            </div>
        </div>
    );
};

export default DragDemo;